<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--导入element-ui样式表-->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/element_index.css') }}">
    <title>蓝牙设备监控页面</title>
</head>
<body>
<div id="vue-app">
    <view-detail></view-detail>
</div>
</body>
<!--引入相应的包-->
<!--让js文件可以使用Flask.url_for-->
{{ JSGlue.include() }}
<!--Vue.js-->
<script src="{{ url_for('static', filename='js/vue.js') }}"></script>
<!--element-ui-->
<script src="{{ url_for('static', filename='js/element-index.js') }}"></script>
<!--axios.js-->
<script src="{{ url_for('static', filename='js/axios.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<!--templates-->
<script type="text/x-template" id="view-detail-template">
    <div>
        <p>手环编号: {[running.bracelet_name]}</p>
        <p>状态:{[running.data]}</p>
        <p>心跳:{[running.heart_beat]} /每分钟</p>
        <p>步数:{[running.peace_count]} 步</p>
        <p>里程:{[running.meter_count]} 米</p>
        <p>消耗:{[running.calorie]} 卡路里</p>
        <p>速度:{[running.peace_speed]}/每小时</p>
    </div>
</script>

<!--项目js-->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
